<template>
	<!-- :class是绑定了一个动态属性，是v-bind:class="iconClass"的简写 -->
	<i class="iconfont" :class="[iconClass,extraClass]"></i>
</template>

<script>
	// 主要用于名称的映射
	var map = {
		arrowUp:"icon-iconfonticontrianglecopy",
		arrowDown:"icon-xiajiantou",
		search:"icon-search"
	}
	export default{
		// 属性
		props:{
			// 该组件需要一个名为type的属性值，以下是对type的定义
			type:{//该属性名为type
				type:String,//该属性的类型为string
				required:true//该属性必须有一个返回值，否则会报错
			},
			// 添加这个额外属性的含义就是：避免父组件对子组件的样式进行直接修改，应该是父组件将类样式传递给子组件，让子组件自己修改处理
			extraClass:{
				type:String,
				default:""
			}
		},
		// 计算属性
		computed:{
			// 名为iconClass的计算函数
			iconClass(){
				// 返回的是map映射中的对应图	标的代码
				return map[this.type]
				console.log(type)
			}
		}
	}
</script>

<style scoped="scoped">
	@import url("//at.alicdn.com/t/font_2683619_r2im1t2n4rr.css");
</style>
